/**
 *-------------------------------------------------------------------
 * jQuery Single-Page Navigation Slider
 *-------------------------------------------------------------------
 * A simple plugin that lets you slide divs left, right, top, bottom
 * by clicking on anchor links with the same id as the divs.
 *
 *-------------------------------------------------------------------
 * Usage:
 *-------------------------------------------------------------------
 *    Ensure that the nav anchors have the same ids as
 *        the corresponding divs
 *    Eg. for anchor tags with class name "slideme"
 *
 * <script>
 *	$('a.slideme').live('click', function(){
 *		var id = this.id;
 *		slidify({
 *			id: id,
 *			to: "30%",
 *			from: "left",
 *			duration: 500,
 *			// css for active navigation selection
 *			css1: {"background-color": "#000", "color": "#fff"},
 *			// css for inactive navigation selection
 *			css2: {"background-color": "#eee", "color": "#000"}
 *		});
 *	});
 * </script>
 *
 *	<div id="navbar">
 *		<div id="n1"><a class="slideme" id="a" href="#">aaaaa</a></div><div id="dd"> | </div>
 *		<div id="n2"><a class="slideme" id="b" href="#">bbbbb</a></div><div id="dd"> | </div>
 *		<div id="n3"><a class="slideme" id="c" href="#">ccccc</a></div>
 *	</div>
 *
 *	<div id="container">
 *		<div id="a">aaaaaa</div>
 *		<div id="b">bbbbbb</div>
 *		<div id="c">cccccc</div>
 *	</div>
 *
 *
 *-------------------------------------------------------------------
 * Reference:
 *-------------------------------------------------------------------
 * http://api.jquery.com/
 *
 *-------------------------------------------------------------------
 * Written by ZnroMonk
 *-------------------------------------------------------------------
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 *-------------------------------------------------------------------
 * Troubleshooting:
 *-------------------------------------------------------------------
 *    To set "from", make sure you have that particular
 *    css style set. If you are going for "left" transition,
 *    you should have the "left" css style set for that div.
 *
 *        #divid{ left: 50%; }
 *
 *    Also position the divs as absolute.
 *
 *    You could also add "display: block;" to the div's css
 * 
 *    The div's main container ("container" in above example) should
 *    have the following css for a basic setup.
 *    You could also change it to your needs.
 *
 *    	position: absolute;
 *		display: block;
 *		margin: 0px;
 *		padding: 0px;
 *		width: 99%;
 *		height: 700px;
 *		overflow-x: hidden; 
 *
 *-------------------------------------------------------------------
 */

function slidify(input){
	var id = input['id'];
	var from = input['from'];
	var to = input['to'];
	var duration = input['duration'];
	var css1 = input['css1'];
	var css2 = input['css2'];
	var l = "";
	
	if(!id){
	    alert('No ID specified for the div specified');
	}
	if(!from){
	    from="left";
	}
	if(!to){
		to="40%"
	}
	if(!duration){
		duration = 1000;
	}
	if(!css1){
		css1="";
	}
	if(!css2){
		css2="";
	}
	
	var n = $('div#'+id).next().attr('id');
	var p = $('div#'+id).prev().attr('id');

	if(from=="left"){
		l = $('div#'+id).offset().left;
		$('div#'+id).css({left: l}).animate({"left" : to}, {duration: duration});
	} else if(from =="right"){
		l = $('div#'+id).offset().right;
		$('div#'+id).css({right: l}).animate({"right" : to}, {duration: duration});
	} else if(from =="top"){
		l = $('div#'+id).offset().top;
		$('div#'+id).css({top: l}).animate({"top" : to}, {duration: duration});
	} else if(from =="bottom"){
		l = $('div#'+id).offset().bottom;
		$('div#'+id).css({bottom: l}).animate({"bottom" : to}, {duration: duration});
	}
	
	$('a#'+id).css(css1);
	
	while(n){
		$('a#'+n).css(css2);
		
		if(from=="left"){
			l = $('div#'+n).offset().left;
			$('div#'+n).css({left: l}).animate({"left" : "110%"}, {duration: duration});
		} else if(from =="right"){
			l = $('div#'+n).offset().right;
			$('div#'+n).css({right: l}).animate({"right" : "110%"}, {duration: duration});
		} else if(from =="top"){
			l = $('div#'+n).offset().top;
			$('div#'+n).css({top: l}).animate({"top" : "110%"}, {duration: duration});
		} else if(from =="bottom"){
			l = $('div#'+n).offset().bottom;
			$('div#'+n).css({bottom: l}).animate({"bottom" : "110%"}, {duration: duration});
		}
		
		n = $('div#'+n).next().attr('id');
		
		while(p){
			$('a#'+p).css(css2);
			
			if(from=="left"){
				l = $('div#'+p).offset().left;
				$('div#'+p).css({left: l}).animate({"left" : "-50%"}, {duration: duration});
			} else if(from =="right"){
				l = $('div#'+p).offset().right;
				$('div#'+p).css({right: l}).animate({"right" : "-50%"}, {duration: duration});
			} else if(from =="top"){
				l = $('div#'+p).offset().top;
				$('div#'+p).css({top: l}).animate({"top" : "-50%"}, {duration: duration});
			} else if(from =="bottom"){
				l = $('div#'+p).offset().bottom;
				$('div#'+p).css({bottom: l}).animate({"bottom" : "-50%"}, {duration: duration});
			}
			
			p = $('div#'+p).prev().attr('id');
		}
	}
	while(p){
		$('a#'+p).css(css2);
		
		if(from=="left"){
			l = $('div#'+p).offset().left;
			$('div#'+p).css({left: l}).animate({"left" : "-50%"}, {duration: duration});
		} else if(from =="right"){
			l = $('div#'+p).offset().right;
			$('div#'+p).css({right: l}).animate({"right" : "-50%"}, {duration: duration});
		} else if(from =="top"){
			l = $('div#'+p).offset().top;
			$('div#'+p).css({top: l}).animate({"top" : "-50%"}, {duration: duration});
		} else if(from =="bottom"){
			l = $('div#'+p).offset().bottom;
			$('div#'+p).css({bottom: l}).animate({"bottom" : "-50%"}, {duration: duration});
		}
		
		p = $('div#'+p).prev().attr('id');
	}
}